<template>
  <div>
      
     <input class="ipt" v-model="toDoMsg">
        <button class="btn" @click="appendMsgToList">添加</button>
        <listitem-base v-for="(item,index) in toDoList" :key="index" 
        :index="index" :text="item" @change="textChange"/>
        
        <div v-show="toDoList.length"> 0">总计: {{toDoList.length}}条</div>
  </div>
</template>

<script>
import listitemBase from './listitemBase.vue';
  export default {
  components: { listitemBase },
    data() {
      return {
        toDoMsg:'',
        toDoList:[]
      }
    },
    methods:{
      appendMsgToList(){
                    if(this.toDoMsg){
                        this.toDoList.push(this.toDoMsg);
                    }
                },
      textChange(text,index){
          this.$set(this.toDoList,index,text)
      }
    },
  }
</script>

<style scoped>
.ipt{
  height: 40px;
  outline: none;
}
.btn{
  height: 40px;
  background-color: #40b883;
  color: white;
  margin-bottom: 20px;
}
</style>
